<template>
  <el-row class="container" :gutter="10">
    <el-col :span="5"
      ><el-card class="box-card" shadow="never">
        <div class="title">项目总览</div>
        <el-row align="middle" type="flex">
          <el-col class="item">
            <div><svg-icon icon-class="project" style="font-size: 24px" /></div>
            <div class="mid">2</div>
            <div>项目总数</div>
          </el-col>
          <el-col class="item">
            <div><svg-icon icon-class="device" style="font-size: 24px" /></div>
            <div class="mid">102</div>
            <div>设备总数</div>
          </el-col>
          <el-col class="item">
            <div><svg-icon icon-class="alarm" style="font-size: 24px" /></div>
            <div class="mid">2</div>
            <div>报警记录</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div class="title">设备总览</div>
        <el-row align="middle" type="flex">
          <el-col class="item">
            <div><svg-icon icon-class="ammeter" style="font-size: 24px" /></div>
            <div class="mid">23</div>
            <div>电表总数</div>
          </el-col>
          <el-col class="item">
            <div>
              <svg-icon icon-class="watermeter" style="font-size: 24px" />
            </div>
            <div class="mid">102</div>
            <div>水表总数</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div class="title">报警信息</div>
        <div class="alarm-item" v-for="o in 4" :key="o">
          <el-row type="flex" justify="space-between">
            <span class="project-name">项目名称</span>
            <span>2023-02-10 14:30:18</span>
          </el-row>
          <el-row type="flex" justify="space-between" class="item-row">
            <span class="info">HAMC_00_1(电)</span>
            <el-tag type="warning">紧急</el-tag>
          </el-row>
          <el-row type="flex" justify="space-between" class="item-row">
            <span class="info">超过限定电压</span>
            <el-tag type="warning" effect="dark">过压</el-tag>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :span="14">
      <baidu-map
        class="map"
        :center="{ lng: 121.187728, lat: 37.570704 }"
        :zoom="15"
        :scroll-wheel-zoom="true"
      >
        <bm-marker
          :position="{ lng: 121.187728, lat: 37.570704 }"
          :dragging="false"
        ></bm-marker>
      </baidu-map>
    </el-col>
    <el-col :span="5">
      <el-card class="box-card" shadow="never">
        <div class="title">今日用能统计</div>
        <el-row align="middle" type="flex">
          <el-col class="item">
            <div><svg-icon icon-class="am" style="font-size: 24px" /></div>
            <div class="mid">280.98</div>
            <div>电（kW•h）</div>
          </el-col>
          <el-col class="item">
            <div><svg-icon icon-class="water" style="font-size: 24px" /></div>
            <div class="mid">39.5</div>
            <div>水（m³）</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div class="title">今日用电趋势</div>
        <div class="charts" id="amCharts"></div>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div class="title">今日用水趋势</div>
        <div class="charts" id="waterCharts"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "SmartEms",
  data() {
    return {};
  },
  mounted() {
    this.initAmCharts();
    this.initWaterCharts();
  },
  methods: {
    initAmCharts() {
      let chartDom = document.getElementById("amCharts");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: "category",
          data: [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
        },
        yAxis: {
          type: "value",
          axisPointer: {
            show: true,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    initWaterCharts() {
      let chartDom = document.getElementById("waterCharts");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: "category",
          data: [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
        },
        yAxis: {
          type: "value",
          axisPointer: {
            show: true,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.container {
  padding: 10px;
  font-size: 14px;
}
.container .title {
  border-left: 3px solid rgb(38, 58, 158);
  padding-left: 5px;
  margin-bottom: 20px;
  text-align: left;
}
.container .item {
  text-align: center;
}
.container .item .mid {
  padding: 15px 0;
  font-size: 18px;
  font-weight: bold;
}
.map {
  height: 89vh;
  width: 100%;
}
.container .box-card {
  margin-bottom: 10px;
}
.container .charts {
  height: 260px;
}
.container .alarm-item .project-name {
  font-weight: bold;
}
.container .alarm-item .info {
  color: #909399;
}
.container .alarm-item .item-row {
  margin: 5px 0;
}
.container .alarm-item {
  border-bottom: 1px dotted #cccccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
</style>
